<template>
  <div class="upload-oss">
    <Uploader
      :before-read="onBeforeRead"
      :before-delete="beforeDelete"
      :after-read="afterRead"
      :accept="fileType"
      v-model="list"
      multiple
      :max-count="maxCount"
      :max-size="maxSize"
      @oversize="onOversize">
    </Uploader>
  </div>
</template>

<script setup>
import { ref, watchEffect } from "vue";
import { Uploader, Toast } from "vant";
import defaultSetting from "@/settings";

//图片压缩工具
import * as imageConversion from "image-conversion";
//obs华为云包
import ObsClient from "esdk-obs-browserjs/src/obs";

import { getRandomString } from "@/utils/index";

const emit = defineEmits(["updateFileList"]);
const props = defineProps({
  maxCount: {
    // 图片张数
    type: Number,
    default: 6,
  },
  maxSize: {
    // 图片大小
    type: Number,
    default: 1000 * 1024,
  },
  fileType: {
    // 文件类型
    type: String,
    default: "image/*",
  },
  fileList: {
    //已上传的文件列表
    type: Array,
    default: () => {
      return [];
    },
  },
});

// watch
const list = ref([]);
watchEffect(() => {
  list.value = props.fileList;
  if (!Array.isArray(list.value)) {
    list.value = [];
  }
  if (list.value?.length > 0) {
    list.value?.forEach((v, index) => {
      // 过滤错误格式的对象
      if (!v.url) {
        list.value?.splice(index, 1);
      }
    });
  }
});

// 文件大小超过限制时触发
function onOversize(file) {
  return Toast("请上传小于20M的图片");
}

// 上传前置处理
const onBeforeRead = (file) => {
  return true;
};

// 前置上传到obs逻辑
let temp = ref(null);
const afterRead = (file) => {
  console.log(file);
  let fileResource = [];
  if (file?.length) {
    file.map((v) => {
      fileResource.push(v.file);
    });
  } else {
    fileResource = file.file;
    // 单个图片
    if (!fileResource?.length) {
      fileResource = [fileResource];
    }
  }
  // 多个图片
  console.log("fileResource", fileResource);
  fileResource.forEach((element, index) => {
    index = Date.parse(new Date()) + index;
    temp.value = new Promise((resolve, reject) => {
      const sizes = element.size / 1024 / 1024 < 1;
      // 只针对图片压缩
      if (!sizes && (element.type == "image/jpeg" || element.type == "image/png")) {
        // 压缩到500KB,这里的500就是要压缩的大小,可自定义
        imageConversion.compressAccurately(element, 500).then((res) => {
          resolve(res);
        });
      } else {
        resolve(element);
      }
    });
    temp.value.then(async (res) => {
      var obsClient = new ObsClient({
        access_key_id: defaultSetting.accessKeyId, // 你的ak
        secret_access_key: defaultSetting.secretAccessKey, // 你的sk
        server: defaultSetting.obsServer, // 你的endPoint  记得加入https://
      });
      // 图片的后缀名字 随机字符串 + 当前时间戳 + 截取的文件类型
      let names = element.name.split(".");
      let uuids = getRandomString(8) + Date.now() + "." + names[names.length - 1];
      await obsClient.putObject(
        {
          Bucket: defaultSetting.bucketName, // 桶名
          Key: uuids, // 文件名   如果是上传首页图片就用固定的路径，如果是上传数据手册，数据报告是用图片文件图片本身的名字，如果是上传图片，那就是根据生成规则随机生成文件名。
          SourceFile: res, //流文件
        },
        (err, result) => {
          if (err) {
            handleUploadError();
          } else {
            let arr = {
              name: `${uuids}`,
              url: `${defaultSetting.imgUrl}${uuids}`, // 因为访问路径OBS没有给你返回需要自行拼接   拼接格式： https:// +  桶名 + endPoint  +  /  + 上传的文件路径
              index: index,
              size: element.name,
            };
            list.value.push(arr);
            emit("updateFileList", list.value);
          }
        }
      );
    });
  });
};

// 删除
const beforeDelete = (result) => {
  let i = list.value.findIndex((v) => {
    return v.name == result.name;
  });
  list.value.splice(i, 1);
  emit("updateFileList", list.value);
  return true;
};

// 上传失败
const handleUploadError = (err) => {
  console.log(err);
  Toast("上传图片失败，请重试");
};
</script>
